<template>
	<view class="certificateinfo-container" :class="[{'scale-style': scale},{'nomargin': noMargin}]">
		<image v-if="data.company_seal" @click="handleSeal"  class="seal-img" :src="baseurl + data.company_seal"></image>
		<view class="blue-view"></view>
		<view class="title f-32">{{data.card_name || '可信工作证'}}</view>
		<view class="img-box flexbox">
			<view class="avater-box">
				<view v-if="data.user_pic || data.user_logo"  class="photo-img-box">
					<image class="photo-img" @load="onload" @click="previewImage(data.user_pic ? baseurl + data.user_pic : baseurl + data.user_logo)" :src="data.user_pic ? baseurl + data.user_pic : baseurl + data.user_logo"></image>
					<view v-show="loadingFlag" class="loading-alert">
						<image class="loading-img" src="../../static/images/loading.gif"></image>
					</view>
				</view>
				<view v-else class="photo-img-default">证件照</view>
				<view class="nick-name ta-c">{{data.nick_name || '-'}}</view>
			</view>
			
			<view class="flexchild info-box">
				<view class="label f-24">{{data.card_key_one}}</view>
				<view class="value ellipsis-2l f-28">{{data.card_content_one || ''}}</view>
				<view class="label f-24">{{data.card_key_two}}</view>
				<view class="value ellipsis-2l  f-28">{{data.card_content_two || ''}}</view>
				<view class="label f-24">{{data.card_key_three}}</view>
				<view class="value  ellipsis-2l  f-28">{{data.card_content_three || ''}}</view>
			</view>
		</view>
		<view class="tip f-22 flexbox"><view>持证说明：</view><view class="flexchild">{{data.card_explain || '-'}}</view></view>
		
		<view class="else-info"><text>签发单位：</text>{{data.company_name}}</view>
		<view class="else-info"><text>有效期至：</text>{{data.failure_ts || data.end_ts}}</view>
		
		<view class="foot-info">
			<view class="foot-info-title flexbox flexbox-middle f-24">安全提示</view>
			<view class="foot-info-cnt flexbox flexbox-middle flexbox-center f-24">
				<view class="foot-item flexchild">
					<image class="foot-img" src="/static/images/info_icon1.png"></image>
					<view class="text">公民身份核验</view>
					<image class="select-icon" src="/static/images/select_icon.png"></image>
				</view>
				
				<view class="foot-item flexchild">
					<image class="foot-img" src="/static/images/info_icon2.png"></image>
					<view class="text">组织机构核验</view>
					<image class="select-icon" src="/static/images/select_icon.png"></image>
				</view>
				
				<view class="foot-item flexchild">
					<image class="foot-img" src="/static/images/info_icon3.png"></image>
					<view class="text">组织授权核验</view>
					<image class="select-icon" src="/static/images/select_icon.png"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import config from "../../request/config.js";
	export default {
		name : "workCard",
		data() {
			return {
				baseurl: config.BASEURL,
				loadingFlag: true
			}
		},
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
			scale: {
				type: Boolean,
				default: false
			},
			noMargin: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			closeSheet(){					
				this.$emit('closeBottom');
			},
			handleSeal() {
				this.$emit('handleSeal')
			},
			onload() {
				setTimeout(() => {
					this.loadingFlag = false
				}, 500)
			},
			stopEvent(){						//@click.stop防止事件冒泡
				
			},
			moveHandle(){						//不让页面滚动

			},
			previewImage(url) {
				console.log(url)
				var imgArr = [];
				imgArr.push(url);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
